<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
      integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
      integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="../assets/css/Password_Strength_Checker.css" />
    <title>Password Strength Checker</title>
  </head>
  <body>
    <div class="container">
      <form class="form-horizontal" id="validateForm">
        <h1>SIGN UP!</h1>
        <fieldset>
          <!-- Email Address input -->
          <div class="form-group">
            <label for="textinput" class="col-md-12 control-label">Email</label>
            <div class="col-md-12">
              <input
                type="email"
                name="textinput"
                id="email"
                autocomplete="off"
                placeholder="Enter Your Email Address"
                class="form-control input-md"
              />
            </div>
          </div>

          <!-- Password Input -->

          <div class="form-group">
            <label for="passwordinput" class="col-md-12 control-label"
              >Password</label
            >
            <div class="col-md-12">
              <input
                type="password"
                class="form-control input-md"
                placeholder="Enter Your Password"
                name="password"
                id="password"
              />
              <span class="show-pass" onclick="toggle()"
                ><i class="far fa-eye" onclick="myFunction(this)"></i
              ></span>
              <div id="popover-password">
                <p><span class="result"></span></p>
                <div class="progress">
                  <div
                    id="password-strength"
                    class="progress-bar"
                    role="progressbar"
                    aria-valuenow="40"
                    aria-valuemax="100"
                    aria-valuemin="0"
                    style="width: 0%"
                  ></div>
                </div>
                <ul class="list-unstyled">
                  <li>
                    <span class="low-upper-case">
                      <i class="fas fa-circle" aria-hidden="true"></i>
                      &nbsp; Lowercase &amp; Uppercase
                    </span>
                  </li>
                  <li>
                    <span class="one-number">
                      <i class="fas fa-circle" aria-hidden="true"></i>
                      &nbsp; Number (0-9)
                    </span>
                  </li>
                  <li>
                    <span class="one-special-char">
                      <i class="fas fa-circle" aria-hidden="true"></i>
                      &nbsp; Special Character (!@#$%^&*)
                    </span>
                  </li>
                  <li>
                    <span class="eight-character">
                      <i class="fas fa-circle" aria-hidden="true"></i>
                      &nbsp; Atleast 8 Character
                    </span>
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <!-- Button -->
          <div class="form-group">
            <a href="#" class="btn login-btn btn-block">Create Account</a>
          </div>
          <div class="ex-account text-center">
            <p>Already have an account? sign in <a href="#">here</a></p>
          </div>
        </fieldset>
      </form>
    </div>
    <script src="../assets/js/Password_Strength_Checker.js"></script>
  </body>
</html>
